<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
  <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet/less" href="./css/reset.less">
  <link rel="stylesheet/less" href="./css/common.less">
  <link rel="stylesheet/less" href="./css/index.less">
</head>

<body>
  <!-- todo header -->
  <header id="header" class="auto_container">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img src="./images/logo.png" alt="">
          </a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

          <!-- ! 右侧导航 -->
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html" class="text-up">home</a></li>
            <li><a href="about.html" class="text-up">about</a></li>
            <li><a href="work.html" class="text-up">work</a></li>
            <li><a href="process.html" class="text-up">process</a></li>
            <!-- <li><a href="#" class="text-up">services</a></li>
            <li><a href="#" class="text-up">testimonials</a></li> -->
            <li><a href="contact.html" class="text-up">contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </header>

  <!-- todo banner -->
  <section id="banner" class="auto_container">
    <div class="row">
      <img src="./images/bg5.jpg" alt="" class="col-md-12 col-sm-12 col-xs-12">
    </div>
    <div class="content">
      <h2>We Design and Develop</h2>
      <p>We are a new design studio based in USA. We have over
        20 years of combined experience, and know a thing or two
        about designing websites and mobile apps.</p>
      <button type="button" class="btn btn-success text-up">contact us</button>
    </div>
  </section>

  <!-- todo about -->
  <section id="about" class="container">
    <p class="text-up center">about us</p>
    <div class="content center">Divide have don't man wherein air fourth. Own itself make have night won't make.
      A you under Seed appear which good give. Own give air without fowl moveth dry first
      heaven fruit, dominion she'd won't very all.
    </div>
    <div class="img">
      <img src="./images/name_03.png" alt="">
    </div>
  </section>

  <!-- todo skills -->
  <section id="skills" class="auto_container">
    <div class="row">
      <img src="./images/bannerimg_02.png" class="col-md-12 col-sm-12 col-xs-12 nopadding">
      <div class="content">
        <b>Professional Skills</b>

        <div class="item">
          <p class="text-up">UI/UX Design<span>75%</span></p>
          <div class="line"></div>
        </div>

        <div class="item">
          <p class="text-up text-fw">web development<span>90%</span></p>
          <div class="line"></div>
        </div>

        <div class="item">
          <p class="text-up text-fw">marketing<span>65%</span></p>
          <div class="line"></div>
        </div>

        <button type="button" class="more-btn btn btn-success text-up">more</button>

      </div>
    </div>
  </section>

  <!-- todo icons -->
  <div id="icons" class="auto_container">
    <div class="container">
      <div class="row">
        <div class="item">
          <i class="fa fa-suitcase"></i>
          <div class="text">
            <b>548</b>
            <p class="text-up">projects completed</p>
          </div>
        </div>
        <div class="item">
          <i class="fa fa-clock-o" aria-hidden="true"></i>
          <div class="text">
            <b>1465</b>
            <p class="text-up">WORKING HOURS</p>
          </div>
        </div>
        <div class="item">
          <i class="fa fa-star-o" aria-hidden="true"></i>
          <div class="text">
            <b>612</b>
            <p class="text-up">POSITIVE FEEDBACKS</p>
          </div>
        </div>
        <div class="item">
          <i class="fa fa-heart-o" aria-hidden="true"></i>
          <div class="text">
            <b>735</b>
            <p class="text-up">HAPPY CLIENTS</p>
          </div>
        </div>

        <!-- ! bug 栅格排序有问题 -->
        <!-- <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="item">
            <i class="fa fa-suitcase" aria-hidden="true"></i>
            <div class="text">
              <b>548</b>
              <p class="text-up">projects completed</p>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="item">
            <i class="fa fa-clock-o" aria-hidden="true"></i>
            <div class="text">
              <b>1465</b>
              <p class="text-up">WORKING HOURS</p>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="item">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <div class="text">
              <b>612</b>
              <p class="text-up">POSITIVE FEEDBACKS</p>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="item">
            <i class="fa fa-heart-o" aria-hidden="true"></i>
            <div class="text">
              <b>735</b>
              <p class="text-up">HAPPY CLIENTS</p>
            </div>
          </div>
        </div> -->

      </div>


    </div>
  </div>

  <!-- todo more -->
  <div id="more" class="auto_container">
    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12 nopadding">
        <img src="./images/熊熊.webp" alt="">
        <div class="layer">
          <i class="fa fa-eye" aria-hidden="true"></i>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 nopadding">
        <img src="./images/熊熊3.webp" alt="">
        <div class="layer">
          <i class="fa fa-eye" aria-hidden="true"></i>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 nopadding">
        <img src="./images/熊熊.webp" alt="">
        <div class="layer">
          <i class="fa fa-eye" aria-hidden="true"></i>
        </div>

      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 nopadding">
        <img src="./images/熊熊3.webp" alt="">
        <div class="layer">
          <i class="fa fa-eye" aria-hidden="true"></i>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12 nopadding">
        <img src="./images/熊熊3.webp" alt="">
        <div class="layer">
          <i class="fa fa-eye" aria-hidden="true"></i>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 nopadding">
        <img src="./images/熊熊2.webp" alt="">
        <div class="layer">
          <i class="fa fa-eye" aria-hidden="true"></i>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 nopadding">
        <img src="./images/熊熊3.webp" alt="">
        <div class="layer">
          <i class="fa fa-eye" aria-hidden="true"></i>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 nopadding">
        <img src="./images/熊熊2.webp" alt="">
        <div class="layer">
          <i class="fa fa-eye" aria-hidden="true"></i>
        </div>
      </div>
    </div>

    <div class="row">
      <a href="javascript:;" class="col-md-12 col-sm-12 col-xs-12 more_btn text-up">
        load more work
      </a>
    </div>
  </div>

  <!-- todo video -->
  <div id="video" class="auto_container padding100">
    <div class="container">
      <!-- ! 标题 -->
      <div class="video-title">
        <p class="text-up title center">Our Work Process</p>
        <p class="text center">
          Was years it seasons was there form he in in them together over that,
          <br>
          third sixth gathered female creeping bearing behold years.
        </p>
      </div>
      <!-- ! video -->
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12 nopadding videos">
        </div>
      </div>
    </div>
  </div>

  <!-- todo icons2 -->
  <div id="icons2" class="auto_container padding100">
    <div class="container">
      <div class="row">

        <div class="col-md-3 col-sm-6 col-xs-12 center">
          <i class="fa fa-diamond"></i>
          <div class="content center">
            <!-- 12 -->
            <p class="title text-up">ui / ux design</p>
            <!-- 16 -->
            <p class="about">Be set fourth land god darkness
              make it wherein own</p>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12 center">
          <i class="fa fa-pie-chart"></i>
          <div class="content center">
            <!-- 12 -->
            <p class="title text-up">web development</p>
            <!-- 16 -->
            <p class="about">A she'd them bring void moving third she'd kind fill</p>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12 center">
          <i class="fa fa-mobile"></i>
          <div class="content center">
            <!-- 12 -->
            <p class="title text-up">app / mobile</p>
            <!-- 16 -->
            <p class="about">Dominion man second spirit he, earth they're creeping</p>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12 center">
          <i class="fa fa-gamepad"></i>
          <div class="content ">
            <!-- 12 -->
            <p class="title text-up">game design</p>
            <!-- 16 -->
            <p class="about">Morning his saying moveth it multiply appear life be</p>
          </div>
        </div>
      </div>

      <div class="row">

        <div class="col-md-3 col-sm-6 col-xs-12 center">
          <i class="fa fa-plane"></i>
          <div class="content center">
            <p class="title text-up">SEO / marketing</p>
            <p class="about">Give won't after land fill creeping meat you, may</p>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12 center">
          <i class="fa fa-star-o"></i>
          <div class="content center">
            <!-- 12 -->
            <p class="title text-up">photography</p>
            <!-- 16 -->
            <p class="about">Creepeth one seas cattle grass give moving saw give</p>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12 center">
          <i class="fa fa-android"></i>
          <div class="content center">
            <!-- 12 -->
            <p class="title text-up">graphic design</p>
            <!-- 16 -->
            <p class="about">Open, great whales air rule for, fourth life whales</p>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12 center">
          <i class="fa fa-html5"></i>
          <div class="content ">
            <!-- 12 -->
            <p class="title text-up">illustrations</p>
            <!-- 16 -->
            <p class="about">Whales likeness hath, man kind for them air two won't</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- todo banner2 -->
  <div id="banner2" class="auto_container">
    <div class="content center">
      <p class="text">
        “ Outstanding job and exceeded all expectations. It was a pleasure <br>
        to work with them on a sizable first project and am looking <br>
        forward to start the next one asap.”
      </p>
      <p class="text-up">
        Michael Hopkins
      </p>
      <div class="page">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>

  <!-- todo sponsor  -->
  <div id="sponsor" class="auto_container">
    <div class="container">
      <div class="item">
        <img src="./images/1.png" alt="">
      </div>
      <div class="item">
        <img src="./images/2.png" alt="">
      </div>
      <div class="item">
        <img src="./images/3.png" alt="">
      </div>
      <div class="item">
        <img src="./images/4.png" alt="">
      </div>
      <div class="item">
        <img src="./images/5.png" alt="">
      </div>
    </div>
  </div>

  <!-- todo form -->
  <div id="form" class="auto_container padding100">
    <div class="container">
      <div class="title center">
        <h3 class="text-up">Need a Project?</h3>
        <p>Let us know what you're looking for in an agency. We'll take a look and see <br>
          if this could be the start of something beautiful.</p>
      </div>
      <div class="form center">
        <div class="row">
          <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="text" class="form-control" placeholder="Your Name">
          </div>
          <div class="col-md-6 col-sm-6 col-xs-12">
            <input type="email" class="form-control" placeholder="Your Email">
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <input type="text" class="form-control" placeholder="Your Title">
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <textarea class="form-control" rows="3" placeholder="Your Comment"></textarea>
          </div>
        </div>
        <button type="button" class="btn btn-success text-up">send message</button>
      </div>
    </div>

  </div>

  <!-- todo footer -->
  <footer id="footer" class="auto_container">
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12 items">
          <b>Piroll Design, Inc.</b>
          <p>© 2017 Piroll. All rights reserved. <br> Designed by robirurk.</p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12 items">
          <p>hello@pirolltheme.com</p>
          <p>+44 987 065 908</p>
        </div>
        <ul class="col-md-1 col-sm-3 col-xs-6 items">
          <li>
            <a href="javascript:;">Projects</a>
          </li>
          <li>
            <a href="javascript:;">About</a>
          </li>
          <li>
            <a href="javascript:;">Services</a>
          </li>
          <li>
            <a href="javascript:;">Carreer</a>
          </li>
        </ul>
        <ul class="col-md-1 col-sm-3 col-xs-6 items">
          <li>
            <a href="javascript:;">News</a>
          </li>
          <li>
            <a href="javascript:;">Events</a>
          </li>
          <li>
            <a href="javascript:;">Contact</a>
          </li>
          <li>
            <a href="javascript:;">Legals</a>
          </li>
        </ul>
        <ul class="col-md-2 col-sm-6 col-xs-12 items">
          <li>
            <a href="javascript:;">Facebook</a>
          </li>
          <li>
            <a href="javascript:;">Twitter</a>
          </li>
          <li>
            <a href="javascript:;">Instagram</a>
          </li>
          <li>
            <a href="javascript:;">Dribbble</a>
          </li>
        </ul>
      </div>
    </div>
  </footer>



  <!-- ! less -->
  <script src="./js/less.min.js"></script>
  <!-- ! jq -->
  <script src="./js/jquery.min.js"></script>
  <!-- ! bootstrap -->
  <script src="./js/bootstrap.min.js"></script>
</body>

</html>